<template>
	<view class="all">
		<view class="content" v-for="item in 6" hover-class="uncontent">
			<image src="../../static/index/asd.png" class="img"></image>
			<view class="text">
				<ul class="top-ul">
					<li><h3>标题</h3></li>
					<li class="jieshao">介绍</li>
					<li><span>price</span><span class="price-num">199/rmb</span></li>
					<br>
				</ul>
				<ul class="btom-ul">
					<li>
						<image src="../../static/tabbar/user1.png" class="ioc"></image><span class="span-li"> cunshang-shu</span>
					</li>
					<li>
						<image src="../../static/index/dingwei.png" class="ioc"></image><span class="span-li"> 河北省石家庄</span>
					</li>
				</ul>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hights: 0
			};
		},
		onLoad() {
		},
		methods: {
		}
	}
</script>

<style lang="scss">
.all{
	box-sizing: border-box;
	padding: 0 30rpx;
}
.uncontent{
	width: 100%;
	border-radius: 20rpx;
	margin-bottom: 100rpx;
	background-color: #FFFFFF !important;
	transition: all 0.5s;
	box-shadow: 0px 0px 5px 5px #d8d8d8;
}
.content{
	width: 100%;
	border-radius: 20rpx;
	background-color: #f5f7fa;
	margin-bottom: 100rpx;
	transition: all 0.5s;
	.img{
		width: 100%;
		border-radius: 20rpx;
	}
	.text{
		ul{
			box-sizing: border-box;
			padding: 0 30rpx;
			list-style: none;
			color: #222222;
			li{
				margin-top: 20rpx;
			}
			.jieshao{
				font-size: 28rpx;
			}
		}
	}
}
.ioc{
	width: 30rpx;
	height: 30rpx;
}
.top-ul{
	border-bottom: 1px solid #c2c2c2;
}
.btom-ul{
	li{
		display: flex;
		align-items: center;
		gap: 15rpx;
	}
}
.span-li{
	font-size: 20rpx;
}
.price-num{
	margin-left: 20rpx;
	color: #e63a28;
}
</style>
